<template>
  <div class="order-room">
    <el-switch
        style="display: block; margin: 20px 0 20px 0"
        v-model="switch1"
        active-color="#13ce66"
        inactive-color="#409eff"
        active-text="VIP用户"
        inactive-text="普通用户">
    </el-switch>
    <div style="margin: auto; width: 400px;">
      <el-form v-if="!switch1" v-model="form">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="form.cardId"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="orderRoom">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin: auto; width: 400px;">
      <el-form v-if="switch1" v-model="form">
        <el-form-item label="身份证号">
          <el-select
              v-model="form.vipCardId"
              clearable
              filterable
              remote
              reserve-keyword
              placeholder="请输入身份证号搜索"
              :remote-method="remoteMethod"
              :loading="loading"
          >
            <el-option
                v-for="item in options"
                :key="item['id']"
                :label="item['name']+' : '+item['cardid']"
                :value="item['cardid']">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.vipRemark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="vipOrderRoom">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {queryVipByCard} from "@/api/VipApi";
import {orderRoom, vipOrderRoom} from "@/api/OrderApi";

export default {
  name: "OrderRoom",
  data() {
    return {
      switch1: false,
      loading: false,
      options: [],
      value: [],
      form: {
        name: '',
        cardId: '',
        phone: '',
        remark: '无备注',
        vipCardId: '',
        vipRemark: 'v备注'
      }
    }
  },
  methods: {
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        //请求网络
        queryVipByCard(query).then(res => {
          this.loading = false;
          this.options = res['data']
        })
      } else {
        this.options = [];
      }
    },
    orderRoom() {
      if (this.form.name === '' || this.form.cardId === '' || this.form.phone === '' || this.form.remark === '' || this.$route.params['roomId'] === '') {
        this.$message.error('请补充信息')
        return
      }
      orderRoom(this.$route.params['roomId'], this.form.name, this.form.cardId, this.form.phone, this.form.remark).then(res => {
        this.$message.success('订房成功')
        this.$router.push('/all')
      }).catch(e => {
        this.$message.error(e)
      })
    },
    vipOrderRoom() {
      if (this.form.vipCardId === '' || this.form.vipRemark === '' || this.$route.params['roomId'] === '') {
        this.$message.error('请输入身份证号')
        return
      }
      vipOrderRoom(this.$route.params['roomId'], this.form.vipCardId, this.form.vipRemark).then(res => {
        this.$message.success('订房成功')
        this.$router.push('/all')
      }).catch(e => {
        this.$message.error(e)
      })
    }
  },
  created() {
  }
}
</script>

<style scoped>
</style>
